<template>
  <div class="nav-footer">
    <div class="tab-container">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab-button', { active: currentTab === tab.id }]"
        @click="setCurrentTab(tab.id)"
      >
        <span class="tab-icon"></span>
        <span class="tab-label">{{ tab.label }}</span>
      </button>
    </div>

    <div class="action-buttons">
      <button class="switch-bg" @click="switchBackground">切换背景</button>
      <button class="download" @click="toggleDownloadPanel">APP下载</button>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
import { useAppStore } from "../../store/modules/app";
export default {
  setup() {
    const appStore = useAppStore();

    const tabs = [
      { id: "session", label: "会话" },
      { id: "chat", label: "聊天" },
      { id: "discover", label: "发现" },
      { id: "profile", label: "我的" },
    ];

    const currentTab = computed(() => appStore.currentTab);

    // 设置当前标签页
    const setCurrentTab = (tabId) => {
      // 使用 Pinia 方式调用 action
      appStore.changeTab(tabId);

      // 如果已迁移到路由驱动，可以导航到对应路由
      // 请根据您的实际路由配置更新
      switch (tabId) {
        case "session":
          router.push("/main/session");
          break;
        case "chat":
          router.push("/main/chat");
          break;
        case "discover":
          router.push("/main/discover");
          break;
        case "profile":
          router.push("/main/profile");
          break;
      }
    };

    const switchBackground = () => {
      store.dispatch("app/switchBackground");
    };

    const toggleDownloadPanel = () => {
      store.dispatch("app/toggleDownloadPanel");
    };

    return {
      tabs,
      currentTab,
      setCurrentTab,
      switchBackground,
      toggleDownloadPanel,
    };
  },
};
</script>

<style scoped>
.nav-footer {
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-container {
  display: flex;
  gap: 10px;
}

.tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 16px;
  transition: all 0.3s;
}

.tab-button.active {
  color: #ff7700;
  background: rgba(255, 119, 0, 0.1);
}

.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  background: #ddd;
  border-radius: 50%;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.switch-bg,
.download {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 18px;
  border: 1px solid #eee;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.download {
  background: linear-gradient(135deg, #ff9d6c, #ff7700);
  color: white;
  border: none;
}
</style>
